/*
 * @Description: 修改字段名称和显示名称
 * @Version: V1.0.0
 * @Autor: CHY
 * @Date: 2022-04-01 14:37:47
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-04-07 09:43:06
 */
import React, { useState, useEffect, useRef } from 'react';
import { Button } from 'antd';
import './index.css'
import '../button.css'
const ModifiName = (props) => {
    //结构props数据
    const p = props
    const { setchangemodifi, colseModifiName, tableData } = p
    const { ename, eid } = tableData.modifiId //结构出修改名称
    const { onChangeHeadle } = tableData
    //定义全局变量
    const [showstate, setShowshate] = useState('modifiName-contanier2')
    const [shoName, setShowName] = useState(ename)

    const valueRef = useRef()
    //关闭修改字段名称和显示名称弹框
    function colseHeadle(props) {
        valueRef.current.value = '' //保存清空input
        colseModifiName()
        setShowshate('modifiName-contanier2')
    }
    //保存后修改
    function saveHeadle(e) {
        const { value } = valueRef.current//结构refvalue值
        valueRef.current.value = '' //保存清空input
        onChangeHeadle(e, eid, value, 1)//调用修改函数
        // console.log('e',e);
        colseHeadle(props)//关闭弹窗
    }

    useEffect(() => {
        if (setchangemodifi) {
            setShowshate('modifiName-box')
        }
        setShowName(ename)
    }, [setchangemodifi, ename])
    return (
        < >
            <div className={showstate}>
                <div className='modifiName-tile'>修改字段选择名称 <span onClick={colseHeadle}>X</span></div>
                <div className='modifiName-content'>
                    <div >显示名称</div>
                    <div ><input placeholder={shoName} ref={valueRef} /></div>
                    <div>字段名称(含自定义字段)不要重复！</div>
                    <div>否则导出会报错！</div>
                    <div>
                        <Button type='primary' className='btn-bgc-13' onClick={saveHeadle}>保存</Button>&nbsp;&nbsp;
                        <Button type='primary' className='btn-bgc-12' onClick={colseHeadle}>关闭</Button>
                    </div>
                </div>

            </div>
        </>
    );
}

export default ModifiName;
